<template>
  <div class="kind-main">
    <div class="header">
      <img @click="$router.back(-1)" :src="require('@/assets/imgs/icons/arr-l.png')" alt class="head-icon head-search">
      <h2 class="head-zaowu">ZAOWU 造物</h2>
      <div class="head-icons">
        <img :src="require('@/assets/imgs/icons/chat.png')" alt class="head-icon head-chat">
        <img :src="require('@/assets/imgs/icons/cart.png')" alt class="head-icon head-cart">
      </div>
    </div>

    <div class="banner">
      <div class="banner-goods-bar" v-for="Mondaykind in Mondaykinds" :key="Mondaykind.id">
        <div class="banner-goode-field" @click="subKindShow(Mondaykind.id)">
          <img class="banner-goods-img" :src="Mondaykind.img" alt>
        </div>
        <ul class="banner-goods-list" v-show="flage === Mondaykind.id">
          <router-link
            :to="{name:'subKind',params:{subKindId:subKind.id}}"
            tag="li"
            class="banner-goods-item"
            v-for="subKind in Mondaykind.subKinds"
            :key="subKind.id"
          >
            {{subKind.cname}}
            <img
              :src="require('@/assets/imgs/icons/arr-r-1.png')"
              alt
              class="banner-item-icon"
            >
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import kindApi from "@/api/kind/kind.js";
export default {
  name: "Kind",

  components: {},

  data() {
    return {
      flag: true,
      Mondaykinds: [],
      flage: "",
      tiae: true
    };
  },
  created() {
    this.getSubKinds();
  },
  methods: {
    subKindShow(id) {
        if(this.flage != id){
        this.flage = id;
        }else if(this.flage == id){
        this.flage ="";
        }
    },
    getSubKinds() {
      kindApi.getSubKinds().then(res => {
        //res返回的结果 数据
        this.Mondaykinds = res;
      });
    },
    goBack(){
      console.log(111)
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/assets/style/commin.scss";

.header {
  display: flex;
  padding: 0 $basPadding;
  justify-content: space-between;
  align-items: center;
  // background-color: pink;
  margin-bottom: 13.5px;
  width: 100%;
  height: 28px;
  .head-zaowu {
    font-size: 20px;
    color: #000;
    padding-left: 20px;
  }
  .head-icons {
    .head-chat {
      margin-right: 20px;
    }
  }
  .head-icon {
    width: 20px;
    height: 20px;
  }
  .head-search {
  }
}
.banner {
  margin-top: 9px;
  padding: 0 $basPadding;
  .banner-goode-field {
    width: 340px;
    margin: 0 auto;
    height: 140px;
    margin-bottom: 7.5px;
    .banner-goods-img {
      width: 340px;
      height: 140px;
    }
  }
  .banner-goods-list {
    .banner-goods-item {
      position: relative;
      text-align: left;
      color: #494949;
      font-size: 16px;
      border-bottom: 1px solid #d8d6d6;
      line-height: 44px;
      .banner-item-icon {
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 50%;
        right: 5px;
        margin-top: -7.5px;
      }
    }
  }
}
</style>

